<template>
    <div class="container">
        <video controls :src="video.url" class="video">你的浏览器不支持播放视频</video>
        <div class="video-title"><b>{{video.name}}</b></div>
        <div class="info">
            {{video.info}}
        </div>
        <div class="icon">
            <span style="display:inline-block;float: left">{{video.time | UtoDate}}</span>
            <div class="i" @click="like(video)"><i
                    :class="video.liked==0?'iconfont icon-xihuan2':'iconfont icon-xihuan1'" class=" ii"></i>{{
                video.likes}}
            </div>
            <div class="i" @click="zan(video)">
                <i :class="video.zand==0?'iconfont icon-zan2':'iconfont icon-zan1'" class="ii"></i>
                {{ video.zans}}
            </div>
            <div v-if="role==='admin'"  class="i" @click="delvideo(video.vid)">
                <i class="iconfont icon-delete ii"></i> 删除
            </div>
        </div>
        <div class="video-title"><h4>评论列表</h4></div>
        <div class="messagesend">

            <textarea v-model="msg" placeholder="输入你的评论" rows=1   class="input">
            </textarea>
            <button class="btn" @click="sendmes">发表</button>
        </div>

        <div class="message">
            <div class="m" v-for="m in message">
                <div class="h">
                    <img :src="m.hard"
                         class="hard">&nbsp;
                    <div class="text">
                        <div class="cont-text"><b>{{m.petname}}</b> &nbsp;&nbsp;&nbsp;<span
                                style="color: #888">{{m.time | UtoDate}}</span>
                            <span v-if="role==='admin'||m.uid.toString()===uid.toString()" style="color: #F56C6C" @click="delVideoMes(m.mid)"><i
                                    class="iconfont icon-delete"></i></span>
                        </div>
                        <div class="cont-text" style="font-size:14px">{{m.content}}</div>
                    </div>
                </div>

            </div>
        </div>
    </div>
</template>

<script>
    import api from '@/api'

    export default {
        name: "videos",
        props: ['vid'],
        data() {
            return {
                video: {
                    vid: 0,
                    name: '',
                    url: "",
                    info: "",
                    time: 1525682209,
                    img: " ",
                    likes: 1,
                    zans: 0,
                    liked: 0,
                    zand: 0,
                },
                message: [],
                msg: '',
                role:sessionStorage.role,
                uid:sessionStorage.uid
            }
        }, methods: {
            loadvideo() {
                api.getvideo({vid: this.vid}).then(
                    ({data: resp}) => {
                        if (resp.code === 200) {
                            this.video = resp.data
                        } else {
                            this.$message({message: '加载视频失败!', type: 'warning'})
                        }
                    }
                )
            },
            /*删除视频*/
            delvideo(id){
                this.$confirm('确定删除？', '系统提示', {
                    type: 'info',
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                }).then(() => {
                    api.delvideo({vid: id}).then(({data}) => {
                        if (data.code === 200) {
                           this.$message({type:'success',message:'删除成功'});
                           this.$router.push('/index');
                        }else{
                            this.$message({type:'warning',message:data.message});
                        }
                    }).catch(()=>{
                        this.$message({type:'warning',message:'请求失败，请稍后重试'});
                    })
                })
            },
            /*获取评论*/
            loadmes() {
                api.getVideoMes({vid: this.vid}).then(({data: resp}) => {

                    if (resp.code === 200) {
                        this.message = resp.data
                    } else {
                        this.$message({message: '加载视频评论失败!', type: 'warning'})
                    }

                })
            },
            /*发表评论*/
            sendmes() {
                if (typeof sessionStorage.uid === 'undefined') {
                    this.$message({message: '你还没有登录哦,请登录后再操作', type: 'warning'})
                    return
                }
                if (this.msg.length < 8) {
                    this.$message({message: '评论最低需要8个字符', type: 'warning'})
                    return
                }
                api.addVideoMes({vid: this.vid, content: this.msg}).then(({data}) => {
                    if (data.code === 200) {
                        this.$message({message: '发表成功!', type: 'success'})
                        this.loadmes()
                        this.msg = ''
                    } else {
                        this.$message({message: data.message, type: 'warning'})

                    }
                })
            },
            /*删除评论*/
            delVideoMes(id){
                this.$confirm('确定删除后无法恢复，确定删除？', '系统提示', {
                    type: 'info',
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                }).then(() => {
                    api.delVideoMes({mid: id}).then(({data}) => {
                        if (data.code === 200) {
                            this.$message({type: 'success', message: '删除成功'});
                            this.loadmes(); //获取评论
                        } else {
                            this.$message({message: data.message, type: 'warning'});
                        }
                    }).catch(() => {
                        this.$message({type: 'warning', message: '请求失败，请稍后重试'});
                    })
                })
            },
        }, created() {
            this.loadvideo()
            this.loadmes()
        }
    }
</script>

<style scoped>
    .container {

    }

    .video {
        background: black;
        width: 56%;
        margin-left: -28%;
        position: relative;
        left: 50%;
    }

    .video-title {
        padding: 0 25px;
        font-size: 18px;
    }

    .info {
        height: 28px;
        font-size: 14px;
        color: #666;
        line-height: 28px;
        width: calc(100% - 80px);
        padding: 0 25px;
    }

    .icon {

        user-select: none;
        width: 95%;
        height: 30px;
        color: #888;
        line-height: 30px;
        text-align: right;
        margin: 0 2.5%;
        font-size: 14px;
        border-bottom: solid 1px #999;
    }

    .i {
        user-select: none;
        display: inline-block;
        margin-right: 10px;
    }

    .ii {
        user-select: none;
        font-size: 16px
    }

    .messagesend {
        height: 32px;
        line-height: 32px;
        position: relative;
        width: 95%;
        margin: 0 2.5%;
    }

    .input {
        resize: none;
        position: relative;
        outline: none;
        box-shadow: none;
        background: transparent;
        border: none;
        -webkit-appearance: none;
        -webkit-font-smoothing: antialiased;
        font-size: 16px;
        font-weight: 400;
        line-height: 24px;
        border-bottom: 1px solid;
        width: calc(100% - 80px);
    }

    .btn {
        display: inline-block;
        white-space: nowrap;
        cursor: pointer;
        -webkit-appearance: none;
        text-align: center;
        outline: none;
        margin: 0;
        transition: .1s;
        font-weight: 500;
        -moz-user-select: none;
        -webkit-user-select: none;
        -ms-user-select: none;
        height: 28px;
        font-size: 12px;
        padding: 0 8px;
        line-height: 28px;
        border-radius: 3px;
        position: absolute;
        background: #66b1ff;
        border-color: #66b1ff;
        color: #fff;

    }

    .message {
        padding: 0 32px;
    }

    .m {
        margin-top: 10px;
    }

    .h {
        position: relative;
        height: 60px;
        line-height: 60px;
    }

    .hard {
        background: black;
        position: relative;
        width: 50px;
        height: 50px;
        border-radius: 25px;
        display: inline-block;
    }

    .text {
        display: inline-block;
        height: 60px;
        vertical-align: top;
    }

    .cont-text {
        height: 30px;
        line-height: 30px;
    }
</style>